<template>
    <div class="app-container">
        <div style="margin-top: -10px;margin-bottom: 18px">
            <el-button icon="el-icon-magic-stick" v-hasPermi="['score:score_ex_exam:edit']" @click="planStudent" type="success" round plain>安排学员</el-button>
            <el-button icon="el-icon-circle-close" v-hasPermi="['score:score_ex_exam:edit']" @click="clearPlanStudent" type="primary" round plain>清空学员安排</el-button>

            <el-button-group style="float: right">
                <el-button icon="el-icon-star-off" v-hasPermi="['score:score_ex_exam:export']" @click="handleExport('all')" type="success" plain>导出考场安排</el-button>
                <el-button icon="el-icon-user" v-hasPermi="['score:score_ex_exam:export']" @click="handleExport('student')" type="danger" plain>导出学员</el-button>
                <el-button icon="el-icon-s-custom" v-hasPermi="['score:score_ex_exam:export']" @click="handleExport('examiner')" type="warning" plain>导出考官</el-button>
                <el-button icon="el-icon-help" v-hasPermi="['score:score_ex_exam:export']" @click="handleExport('simulated_patient')" type="primary" plain>导出标准化病人</el-button>
            </el-button-group>
        </div>
        <el-tabs type="border-card" tab-position="bottom">
            <el-tab-pane v-for="(timeMap,date) in allotData"><span slot="label"><i
                class="el-icon-date"/> {{ date }}</span>
                <div class="big-box box-height" v-for="(placeMap,timeId) in timeMap">
                    <el-row :gutter="11">
                        <el-col :span="4">
                            <div class="time-title">
                                <el-tag type="success" effect="plain">{{ timeData[timeId].name }}</el-tag>
                                <br>
                                <el-tag type="warning" effect="plain">{{ timeData[timeId].startTime }}</el-tag>
                                ~
                                <el-tag type="warning" effect="plain">{{ timeData[timeId].endTime }}</el-tag>
                            </div>
                        </el-col>
                        <el-col :span="20">
                            <div class="place-body box-height">
                                <template v-for="(p1,placeId) in placeMap">
                                    <template v-for="(p2,index) in p1">
                                        <ALLOT_PLACE style="float: left" :place="p2" :placeId="placeId" :timeId="timeId"
                                                     :date="date" :num="index" :placeData="placeData" :sessionData="sessionData"
                                                     :teacherList="teacherList" :simulatedPatientList="simulatedPatientList"/>
                                    </template>
                                </template>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>

import {getScore_ex_exam_allot, plan_student, clear_plan_student} from "@/api/score/score_ex_exam";
import ALLOT_PLACE from "../place/allot_place.vue"
import {listTeacher} from "@/api/system/teacher";
import {listSimulatedPatient} from "@/api/system/simulated_patient";
import {parseTime} from "@/utils/ruoyi";

export default {
    name: "ex_exam_allot",
    components: {ALLOT_PLACE},
    props: {
        form: {
            type: Object,
        }
    },
    watch: {
        'form.allotStatus'(n, o) {
            if (n == '2') {
                this.getAllotByExam();
            }else if (n == '1'){
                this.allotData={};
                this.timeData={};
                this.placeData={};
                this.sessionData={};
            }
        }
    },
    data() {
        return {
            allotData: {},//排站数据
            timeData: {},//排站数据-时段数据
            placeData: {},//排站数据-站点数据
            sessionData: {},//节次详情
            teacherList: [],//教师
            simulatedPatientList: [],//标准化病人
        };
    },
    created() {
        this.getAllotByExam();
        this.getTeacherList();
        this.getSimulatedPatientList();
    },
    methods: {
        /** 查询患者列表 */
        getSimulatedPatientList() {
            listSimulatedPatient({pageSize: 1000, pageNum: 1}).then(response => {
                    this.simulatedPatientList = response.rows;
                }
            );
        },
        /** 查询教师列表 */
        getTeacherList() {
            listTeacher({pageSize: 1000, pageNum: 1}).then(response => {
                    this.teacherList = response.rows;
                }
            );
        },
        /** 查询该考试下的排站信息 */
        getAllotByExam() {
            if (this.form.allotStatus == '2') {
                getScore_ex_exam_allot(this.form.id).then(response => {
                    this.allotData = response.data;
                    this.timeData = response.timeMap;
                    this.placeData = response.placeMap;
                    this.sessionData = response.sessionMap;
                })
            }
        },
        /** 安排该考试的学员 */
        planStudent() {
            this.$confirm('此操作将重新编排学员序号，是否继续', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                plan_student(this.form.id).then(response => {
                    this.$modal.msgSuccess("分配成功");
                    this.getAllotByExam();
                })
            }).catch(() => {
                this.$modal.msgSuccess("取消成功");
            });
        },
        /** 清空该考试安排的学员 */
        clearPlanStudent() {
            clear_plan_student(this.form.id).then(response => {
                this.$modal.msgSuccess("清空成功");
                this.getAllotByExam();
            })
        },
        /** 导出按钮操作 */
        handleExport(command) {
            let fileName;
            switch (command){
                case 'all': fileName = '考场安排';break;
                case 'student': fileName = '学员';break;
                case 'examiner': fileName = '考官';break;
                case 'simulated_patient': fileName = '标准化病人';break;
            }
            this.download('score/score_ex_exam/export/'+command, {id:this.form.id}, `${this.form.name}_${fileName}_${parseTime(new Date(),'{y}-{m}-{d}')}.xlsx`)
        },
    }
};
</script>
<style>
.box-height {
    height: 370px;
}

.time-title {
    /*border: solid 1px red;*/
    padding-top: 150px;
    text-align: center;
}

.place-body {
    padding-top: -100px;
    margin-bottom: 5px;
    display: flex;
    border-left: solid 1px slategray;
    overflow-x: auto; /*水平滚动条*/
    overflow-y: hidden; /*垂直方向不需要滚动*/
    white-space: nowrap; /*在一行内显示*/
}


/*接下来定义滚动条的轨道*/
.place-body::-webkit-scrollbar-track {
    background-color: #F5F5F5; /*轨道的底色*/
    border-radius: 10px; /*圆角*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); /*阴影*/
}

/*滚动条的指示器*/
.place-body::-webkit-scrollbar-thumb {
    background-color: #AAA; /*指示器颜色*/
    border-radius: 10px; /*圆角*/
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); /*阴影*/
}

/*鼠标滑过指示器的样式*/
.place-body::-webkit-scrollbar-thumb:hover {
    background-color: #999; /*指示器颜色*/
}

/*鼠标点击指示器时的样式*/
.place-body::-webkit-scrollbar-thumb:active {
    background-color: #777; /*指示器颜色*/
}

.big-box {
    width: 100%;
}

</style>




























